<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<style>
  div {
    text-align: center;
  }

  p {
    text-align: center;
  }

  .apple {
    border: 1px solid black;
    text-align: center;
  }

  .buy {
    border: 1px solid black;
    text-align: center;
  }

  .cost {
    border: 1px solid black;
    text-align: center;
  }
</style>

<body>
  <div id="app">
    <p>欢迎光临 铛铛铛水果店</p>
    <h3 class="apple">苹果 10¥/斤，折扣<8折>
    </h3>
    <tbody>
      <tr>
        <td>
          <span>请输入你要购买的斤数</span>

          <input type="text" v-model="num" />

        </td>
      </tr>
    </tbody>
    <button @click="pay">结账买单</button>
    <p class="cost">
      结账单：总价：{{total}}元 折后价：{{discount}}元
      省了{{save}}元
    </p>
  </div>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        num: 1,
        total: '',
        discount: '',
        save: ''
      },
      methods: {
        pay() {
        this.total=this.num*10
        this.discount=this.num*2
        this.save=this.total-this.discount
        },
        
      },
     



    });
  </script>
</body>

</html>